﻿<div class="control-group">
    <cms-field>
        <label class="control-label" for="{{vm.modelName}}">{{vm.title}}:</label>

        <div class="controls">

            <input type="hidden"
                   id="{{vm.modelName}}"
                   name="{{vm.modelName}}"
                   ng-model="vm.model"
                   ng-change="vm.onChange()" />

            <div>

                <span ng-if="vm.previewAsset">
                    <cms-document-asset cms-document="vm.previewAsset"></cms-document-asset>
                </span>

                <span ng-if="!vm.previewAsset">None</span>

                <span ng-hide="!vm.formScope.editMode || vm.readonly">
                    <cms-button-icon cms-href="{{vm.urlLibrary.documentDetails(vm.previewAsset.documentAssetId)}}"
                                     cms-external="true"
                                     cms-title="Edit document"
                                     cms-icon="external-link"
                                     ng-disabled="vm.loadState.isLoading || vm.disabled"
                                     ng-if="vm.previewAsset">
                    </cms-button-icon>
                    <cms-button-icon cms-title="{{vm.buttonText}}"
                                     cms-icon="cog"
                                     ng-click="vm.showPicker()"
                                     ng-disabled="vm.loadState.isLoading || vm.disabled">
                    </cms-button-icon>
                    <cms-button-icon cms-title="Remove"
                                     cms-icon="trash-o"
                                     ng-if="vm.isRemovable"
                                     ng-click="vm.remove()"
                                     ng-disabled="vm.loadState.isLoading || vm.disabled">
                    </cms-button-icon>
                </span>
            </div>

            <cms-form-field-validation-summary></cms-form-field-validation-summary>
        </div>
    </cms-field>
    <p class="help-inline" ng-if="vm.description">
        <small>{{vm.description}}</small>
    </p>
</div>